import { ITouchEvent, View } from '@tarojs/components';
import { CSSProperties, ReactNode, useState } from 'react';
import styles from './style.scss';
import { ArrowDown, ArrowLeft } from '@nutui/icons-react-taro';

type Props = {
  children?: ReactNode;
  style?: CSSProperties;
  title?: ReactNode;
  className?: string;
  showTitleBlock?: boolean;
  onClick?: ((event: ITouchEvent) => void) | undefined;
  contract?: boolean;
};
export default (props: Props) => {
  const {
    children,
    style,
    className,
    title,
    showTitleBlock,
    onClick,
    contract,
  } = props;
  const [expand, setExpand] = useState(true);

  return (
    <View
      style={style}
      className={`${styles.card} ${className || ''} custom_card`}
      onClick={onClick}
    >
      <View
        className={`${styles.header} card_header`}
        style={{
          // paddingBottom: expand ? undefined : 0,
          borderBottom: expand ? undefined : 'none',
        }}
      >
        {title && (
          <View className={`${showTitleBlock ? 'block' : ''} card_title`}>
            {title}
          </View>
        )}
        {contract && (
          <View
            className={styles.contractWrap}
            onClick={() => setExpand(!expand)}
          >
            {expand ? <ArrowDown /> : <ArrowLeft />}
          </View>
        )}
      </View>

      <View className="card_body" style={{ height: expand ? 'auto' : 0 }}>
        {children}
      </View>
    </View>
  );
};
